<template>
  <div>
    <dtDialog
      title="手动生成任务"
      :visible.sync="generateTaskVisible"
      :is-loading="loading"
      :footer-slot="true"
      @closeDialog="handleCancel"
    >
      <el-form
        ref="generateTaskForm"
        slot="content"
        :rules="generateTaskRules"
        :model="generateTaskTemp"
        label-position="right"
        label-width="112px"
      >
        <el-form-item label="任务名称" prop="jobName">
          <el-input v-model.trim="generateTaskTemp.jobName" maxlength="30" show-word-limit
                    class="limit" />
        </el-form-item>
        <el-form-item label="任务编码" prop="jobId">
          <el-input v-model.trim="generateTaskTemp.jobId" disabled maxlength="30"
                    show-word-limit class="limit" />
        </el-form-item>
        <el-form-item prop="appIds">
          <span slot="label">
            <span class="span-box">
              <el-tooltip class="item" effect="dark" :content="`只允许选择已配置过Topic的第三方应用`"
                          placement="top-start">
                <i class="el-icon-question" />
              </el-tooltip>
              同步应用
            </span>
          </span>
          <el-select v-model="generateTaskTemp.appIds" placeholder="请选择" style="width: 100%;"
                     filterable>
            <el-option v-for="item in appList" :key="item.appId" :label="item.appName"
                       :value="item.appId" />
          </el-select>
          <!-- <div class="select-person-click" :class="{isDisabled:isDisabled}" style="" @click="!isDisabled?openAppDialog():''">
              <div>
                <el-tag
                  v-for="(tag,index) in selectAppData"
                  :key="index"
                  type="info"
                >
                  {{ tag.appName || '' }}
                </el-tag>
                <span v-if="!selectAppData.length" class="plactext">请选择同步应用</span>
              </div>
            </div> -->

          <!-- <selectApp ref="selectAppRef" :app-type="'other'" :provider="provider" :condition="{}" :is-multiple="false" @saveData="saveData" /> -->
        </el-form-item>
        <el-form-item label="推送方式" prop="syncStratey">
          <el-radio-group v-model="generateTaskTemp.syncStratey">
            <el-radio :label="2">API</el-radio>
            <el-radio :label="1">MQ</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="同步信息类型" prop="dataType">
          <el-radio-group v-model="generateTaskTemp.dataType" @change="changeInformationType">
            <el-radio
              v-for="dict in dict.type.dataType"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="generateTaskTemp.dataType!='3'" label="同步信息" prop="sourceData">
          <dt-select-person ref="selectPersonRef" v-model.trim="generateTaskTemp.sourceData" :is-multiple="true"
                            :select-type="selectType" />
        </el-form-item>
        <el-form-item label="推送类型" prop="operationType">
          <el-radio-group v-model="generateTaskTemp.operationType">
            <el-radio
              v-for="dict in dict.type.operationType"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <div style="display:flex;justify-content: flex-end;">
          <el-button size="small" @click="handleCancel">取消</el-button>
          <el-button type="primary" size="small" @click="generateTask('')">生成任务</el-button>
          <el-button type="primary" size="small" @click="generateTask('run')">生成任务并执行</el-button>
        </div>
      </el-form>
    </dtDialog>
  </div>
</template>
<script>
import dataSynchronizationApi from '@/framework/api/datasync/dataSynchronization'
// import selectApp from '@/framework/views/system/clientManage/components/selectApp.vue'
export default {
  // components: { selectApp },
  dicts: ['dataType', 'operationType', 'syncStratey'],
  data() {
    return {
      loading: false,
      generateTaskVisible: false,
      generateTaskTemp: {
        jobName: '',
        jobId: '',
        appIds: '',
        syncStratey: 2,
        dataType: '2',
        sourceData: '',
        operationType: '1'
      },
      generateTaskRules: {
        jobName: [{
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error('请输入任务名称'))
            } else {
              callback()
            }
          }
        }],
        jobId: [{
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error('请输入任务编码'))
            } else {
              callback()
            }
          }
        }
        ],
        dataType: [{
          required: true, message: '请选择同步信息类型', trigger: 'change'
        }],
        sourceData: [{
          required: true, trigger: 'change', message: '请选择同步信息'
        }],
        operationType: [{
          required: true, message: '请选择推送类型', trigger: 'blur'
        }
        ],
        appIds: [{
          required: true, message: '请选择同步应用', trigger: 'change'
        }],
        syncStratey: [{
          required: true, message: '请选择推送方式', trigger: 'blur'
        }]
      },
      selectType: 'org',
      provider: dataSynchronizationApi.dataSyncApps,
      selectAppData: [],
      isDisabled: false,
      appList: []
    }
  },
  methods: {
    // 打开选应用弹窗
    // openAppDialog() {
    // this.$refs.selectAppRef.openSelect(this.selectAppData)
    // },
    // 获取任务名称和任务编码
    getGenerateJobIdAndJobName() {
      dataSynchronizationApi.generateJobIdAndJobName().then((res) => {
        this.generateTaskTemp.jobName = res.data.jobName
        this.generateTaskTemp.jobId = res.data.jobId
      })
    },
    // 打开生成任务弹窗
    openDialog() {
      this.selectType = 'org'
      this.generateTaskVisible = true
      this.getGenerateJobIdAndJobName()
      this.getAppList()
    },
    // 改变同步信息类型
    changeInformationType(val) {
      if (val === '3') {
        return
      }
      if (val == 2) {
        this.selectType = 'org'
        this.$refs.selectPersonRef.currentMultipleSelectOrgData = []
      } else {
        this.selectType = 'person'
        this.$refs.selectPersonRef.currentMultipleSelectPersonData = []
      }
    },
    handleCancel() {
      this.generateTaskTemp = {
        jobName: '',
        jobId: '',
        operationType: '1',
        appIds: '',
        dataType: '2',
        sourceData: '',
        syncStratey: 2

      }
      this.resetForm('generateTaskForm')
      this.generateTaskVisible = false
      this.selectAppData = []
    },
    generateTask(type) {
      this.$refs['generateTaskForm'].validate(async (valid) => {
        if (valid) {
          this.loading = true
          try {
            if (type == 'run') {
              this.generateTaskTemp.runFlag = 2
            } else {
              this.generateTaskTemp.runFlag = 1
            }
            const res = await dataSynchronizationApi.generateManualJob(this.generateTaskTemp)
            if (res.code === '00000') {
              this.$dtMessage({
                title: '成功',
                message: type == 'run' ? '当前任务已生成，正在执行' : '任务生成成功',
                type: 'success',
                duration: 2000
              })
              this.$parent.getList()
              this.generateTaskVisible = false
            }
            this.loading = false
          } catch (error) {
            this.loading = false
          }
        }
      })
    },
    saveData(appIds, selectData) {
      this.selectAppData = selectData
      this.generateTaskTemp.appIds = appIds
      this.$refs.selectAppRef.cancel()
    },
    // 获取同步应用
    getAppList() {
      dataSynchronizationApi.dataSyncApps().then((res) => {
        this.appList = res.data
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .select-person-click{
    border: 1px #c0c4cc solid;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    height:100%;
    padding: 0px 8px 0 8px;
    margin: auto;
    min-height: 36px;
    > div{
      margin: auto;
    }
    .el-tag {
      margin-right: 5px;
      margin-bottom: 4px;
    }
  }
  .plactext{
    color: #DCDFE6;
  }
  .isDisabled{
  display: flex;
  align-items: center !important;
  margin: 8px 0 0 14px;
  cursor:not-allowed;
  // cursor: not-allowed !important;
  justify-content: space-between;
  // pointer-events: none;
  color: #909399 !important;
  .cancle{
  pointer-events: none;
}
}
</style>
